<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Temu跨境电商平台系统设计 - 目录</title>
    <link
      href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css"
    />
    <link
      href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap"
      rel="stylesheet"
    />
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .slide-container {
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, #ffffff 0%, #f8f8f8 100%);
        position: relative;
        overflow: hidden;
        font-family: "Noto Sans SC", sans-serif;
        animation: slideInRight 0.8s ease-out forwards;
      }
      .bg-temu-orange {
        background-color: #ff4e00;
      }
      .text-temu-orange {
        color: #ff4e00;
      }
      .bg-temu-blue {
        background-color: #003366;
      }
      .text-temu-blue {
        color: #003366;
      }
      .border-temu-orange {
        border-color: #ff4e00;
      }
      .toc-container {
        max-width: 800px;
      }
      .toc-item {
        margin-bottom: 2rem;
        opacity: 0;
        transform: translateX(-20px);
        animation: slideIn 0.5s ease-out forwards;
      }
      .toc-item:nth-child(1) {
        animation-delay: 0.1s;
      }
      .toc-item:nth-child(2) {
        animation-delay: 0.3s;
      }
      .toc-item:nth-child(3) {
        animation-delay: 0.5s;
      }
      .toc-item:nth-child(4) {
        animation-delay: 0.7s;
      }
      .toc-item:nth-child(5) {
        animation-delay: 0.9s;
      }

      .toc-text {
        font-size: 1.5rem;
        transition: all 0.3s ease;
      }
      .toc-icon {
        width: 60px;
        height: 60px;
        font-size: 1.2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        color: white;
        background-color: #ff4e00;
        margin-right: 30px;
        box-shadow: 0 4px 8px rgba(255, 78, 0, 0.2);
        transition: all 0.3s ease;
      }
      .toc-item:hover .toc-icon {
        transform: scale(1.1);
        box-shadow: 0 6px 12px rgba(255, 78, 0, 0.3);
      }
      .toc-item:hover .toc-text {
        color: #ff4e00;
      }
      .page-number {
        animation: fadeIn 1.5s ease-out forwards;
      }
      .logo-container {
        position: absolute;
        top: 30px;
        right: 30px;
        animation: fadeIn 1.2s ease-out;
      }
      .title-container {
        animation: fadeInDown 1s ease-out;
      }
      .animated-bar {
        width: 80px;
        height: 4px;
        animation: growWidth 1.4s ease-out;
      }
      .decoration-circle {
        position: absolute;
        border-radius: 50%;
        z-index: 0;
      }
      .circle-1 {
        width: 200px;
        height: 200px;
        background-color: rgba(255, 78, 0, 0.05);
        bottom: -80px;
        left: -80px;
      }
      .circle-2 {
        width: 150px;
        height: 150px;
        background-color: rgba(0, 51, 102, 0.05);
        top: -50px;
        right: 200px;
      }
      .title-container h1 {
        font-size: 2.5rem;
      }

      @keyframes slideIn {
        from {
          transform: translateX(-20px);
          opacity: 0;
        }
        to {
          transform: translateX(0);
          opacity: 1;
        }
      }
      @keyframes fadeIn {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }
      @keyframes fadeInDown {
        from {
          transform: translateY(-20px);
          opacity: 0;
        }
        to {
          transform: translateY(0);
          opacity: 1;
        }
      }
      @keyframes growWidth {
        from {
          width: 0;
        }
        to {
          width: 80px;
        }
      }

      /* 添加页面切换动画 */
      @keyframes slideInRight {
        from {
          transform: translateX(100%);
          opacity: 0;
        }
        to {
          transform: translateX(0);
          opacity: 1;
        }
      }

      @keyframes slideInLeft {
        from {
          transform: translateX(-100%);
          opacity: 0;
        }
        to {
          transform: translateX(0);
          opacity: 1;
        }
      }

      .slide-out {
        animation: slideOutLeft 0.8s ease-out forwards;
      }

      @keyframes slideOutLeft {
        from {
          transform: translateX(0);
          opacity: 1;
        }
        to {
          transform: translateX(-100%);
          opacity: 0;
        }
      }

      @keyframes slideOutRight {
        from {
          transform: translateX(0);
          opacity: 1;
        }
        to {
          transform: translateX(100%);
          opacity: 0;
        }
      }
    </style>
  </head>
  <body>
    <div
      class="slide-container flex flex-col items-center justify-start py-16 px-12"
    >
      <!-- Background Elements -->
      <div class="decoration-circle circle-1"></div>
      <div class="decoration-circle circle-2"></div>

      <!-- Logo in top right corner -->
      <div class="logo-container">
        <img
          src="images/temu_logo.svg"
          alt="Temu Logo"
          width="100"
          height="30"
        />
      </div>

      <!-- Title -->
      <div class="title-container text-center mb-14">
        <h1 class="text-4xl font-bold text-temu-blue">目录</h1>
        <div class="animated-bar bg-temu-orange mx-auto mt-3"></div>
      </div>

      <!-- Table of Contents -->
      <div class="toc-container z-10">
        <div class="toc-item flex items-center mb-8 cursor-pointer">
          <div class="toc-icon">
            <i class="fas fa-desktop fa-lg"></i>
          </div>
          <div
            class="toc-text text-xl text-temu-blue font-medium transition-colors"
          >
            软件使用场景
          </div>
        </div>

        <div class="toc-item flex items-center mb-8 cursor-pointer">
          <div class="toc-icon">
            <i class="fas fa-exclamation-triangle fa-lg"></i>
          </div>
          <div
            class="toc-text text-xl text-temu-blue font-medium transition-colors"
          >
            目前存在问题
          </div>
        </div>

        <div class="toc-item flex items-center mb-8 cursor-pointer">
          <div class="toc-icon">
            <i class="fas fa-lightbulb fa-lg"></i>
          </div>
          <div
            class="toc-text text-xl text-temu-blue font-medium transition-colors"
          >
            解决方案/系统特性
          </div>
        </div>

        <div class="toc-item flex items-center mb-8 cursor-pointer">
          <div class="toc-icon">
            <i class="fas fa-clipboard-list fa-lg"></i>
          </div>
          <div
            class="toc-text text-xl text-temu-blue font-medium transition-colors"
          >
            用户需求列表
          </div>
        </div>

        <div class="toc-item flex items-center cursor-pointer">
          <div class="toc-icon">
            <i class="fas fa-project-diagram fa-lg"></i>
          </div>
          <div
            class="toc-text text-xl text-temu-blue font-medium transition-colors"
          >
            用例图展示
          </div>
        </div>
      </div>

      <!-- Page Number -->
      <div
        class="page-number absolute bottom-6 right-8 text-temu-blue opacity-70"
      >
        2 / 20
      </div>
    </div>
  </body>
</html>
